<template>
	<view class="box">
		<view style="height: 40rpx;"></view>
		<view class="invoice-head-info flex">
			<image src="../../static/image/helpDetail_1.png" mode="" class="invoice-pic"></image>
			<view class="invoice-right-info flex1">
				<view class="order-info flex fljcsb">
					<text>订单编号:1234567890</text>
					<text @click="isShowInvoiceIntr(1)">开票说明</text>
				</view>
				<view class="invoice-money">开票金额：<text>¥2997.00</text><text @click="isShowInvoicefMoneyIntr(1)">?</text></view>
			</view>
		</view>
		<view class="invoice-detail-box">
			<view class="form-group-list-head">发票详情</view>
			<view class="form-group">
				<view class="form-group-list flex fljcsb">
					<text>发票类型</text>
					<text>增值税纸质普通发票 ></text>
				</view>
				<view class="form-group-list flex">
					<text>抬头类型</text>
					<view class="flex1">
						<radio-group @change="radioChange" class="flex radio">
							<label class="uni-list-cell flex fljcsb" v-for="(item, index) in items" :key="item.value">
								<view class="">
									<radio :value="item.value" :checked="index === current" color="#7CBD39" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="form-group-list flex">
					<text>发票抬头</text>
					<input type="text" value="" placeholder="请填写发票抬头" class="flex1" />
				</view>
				<view class="form-group-list flex flai">
					<text>公司税号</text>
					<input type="text" value="" placeholder="请填写纳税人识别号" class="flex1" />
				</view>
			</view>

		</view>
		<view class="invoice-con-box">
			<text>发票内容</text>
			<text>光伏设备</text>
		</view>
		<view class="invoice-detail-box">
			<view class="form-group-list-head">接收详情</view>
			<view class="form-group">
				<view class="form-group-list flex">
					<text>收件地址</text>
					<input type="text" value="" placeholder="请填写接收发票地址" class="flex1" />
				</view>
				<view class="form-group-list flex flai">
					<text>收件人姓名</text>
					<input type="text" value="" placeholder="请填写接收发票联系人" class="flex1" />
				</view>
				<view class="form-group-list flex flai">
					<text>收件人手机号</text>
					<input type="text" value="" placeholder="请填写接收发票人手机号" class="flex1" />
				</view>
				<view class="form-group-list">

				</view>
			</view>

		</view>
		<view class="submit" @click="showDialog">提交</view>
		<view class="mask" v-if="showInvoiceDialog">
			<view class="invoice-intr">
				<view class="intr-title">
					开票说明
				</view>
				<view class="intr-con">
					<view>根据相关政策规定，发票内容仅支持开具“光伏设备”</view>
					<view>暂时只支持开具纸质普票，不提供开具专票或电子发票服务</view>
					<view>申请开票用户，需承担单笔20元邮寄费用</view>
					<view>开票期限为3个月，超过3个月的订单，将不提供开票服务</view>
					<view>所开发票将在提交申请后的10个工作日左右寄出，届时会有短信通知物流信息</view>
					<view>开票服务由电站卖方提供，与蜜袋互助平台无关，若有疑问，可在发票详情页查看卖方电话进行联系。</view>
				</view>
			
				<view class="konw-btn" @click="isShowInvoiceIntr(2)">
					我知道了
				</view>
			</view>
		</view>
		<view class="mask" v-if="showInvoiceMoneyDialog">
			<view class="invoice-intr invoice-intr-money">
				<view class="intr-title">
					开票金额
				</view>
				<view class="intr-con">
					<view>开票金额为消费者实付款金额，红包、优惠、购物券等不在开票范围内。</view>
					
				</view>
				<view class="konw-btn" @click="isShowInvoicefMoneyIntr(2)">
					我知道了
				</view>
			</view>
		</view>
		<view class="mask" v-if="showInputConDialog">
			<view class="show-input-info-box">
				<image src="../../static/image/close.png" mode="" @click="closeDialog" class="close-icon"></image>
				<view class="show-head-title">
					开具发票
				</view>
				<view class="show-invoic-con">
					<view class="flex list flai">
						<text>发票类型</text>
						<text class="flex1">增值税纸质普通发票</text>
					</view>
					<view class="flex list flai">
						<text>发票抬头</text>
						<text class="flex1">北京蜜袋互助科技有限公司</text>
					</view>
					<view class="flex list flai">
						<text>公司税号</text>
						<text class="flex1">2JFI 45IT 98RK 4589 I2</text>
					</view>
					<view class="flex list flai">
						<text>发票内容</text>
						<text class="flex1">光伏设备</text>
					</view>
					<view class="flex list flai">
						<text>收件地址</text>
						<text class="flex1">北京西城区雍和宫壹中心B座</text>
					</view>
					<view class="flex list flai">
						<text>收件人姓名</text>
						<text class="flex1">张三</text>
					</view>
					<view class="flex list flai">
						<text>收件人手机号</text>
						<text class="flex1">17788878909</text>
					</view>
					<view class="promit">请确认发票信息无误，确认提交后，将快递到对应地址
					</view>
				</view>
				<view class="confirm-submit" @click="confirmSubmit">确认提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						value: 'USA',
						name: '个人'
					},
					{
						value: 'CHN',
						name: '企业',
						checked: 'true'
					},


				],
				showInvoiceDialog:false,
				showInvoiceMoneyDialog:false,
				showInputConDialog:false,
				current: 0
			}
		},
		methods: {
			radioChange: function(evt) {

			},
			isShowInvoiceIntr(index){
				if (index == 1) {
					this.showInvoiceDialog = true
				} else {
					this.showInvoiceDialog = false
				}
				
			},
			isShowInvoicefMoneyIntr(index){
				if (index == 1) {
					this.showInvoiceMoneyDialog = true
				} else {
					this.showInvoiceMoneyDialog = false
				}
				
			},
			showDialog () {
				this.showInputConDialog = true
			},
			closeDialog () {
				this.showInputConDialog = false
			},
			confirmSubmit() {
				this.showInputConDialog = false
			}
		}
	}
</script>

<style>
	@import url("./css/invoice.css");
	@import url("../../static/css/common.css");
</style>
